<!--
 * @Author: monet hanxu@huaun.com
 * @Date: 2023-09-15 18:19:43
 * @LastEditors: zhangyonggui
 * @LastEditTime: 2023-10-23 15:56:52
 * @FilePath: /h-radar-expose/components/TagManip.vue
 * @Description:
-->
<template>
  <div class="tag-container">
    <el-input
      v-if="inputVisible"
      ref="saveTagInput"
      v-model="inputValue"
      @keyup.enter.native="handleInputConfirm"
      @blur="handleInputConfirm"
    ></el-input>
    <div v-else class="new-tag" @click="showInput">+ 新增标签</div>
    <el-tooltip
      v-for="(tag, index) in reverseArray"
      :key="index"
      effect="dark"
      :content="tag.tag"
      placement="bottom"
    >
      <div class="tag">
        <span>{{ tag.tag }}</span>
        <el-icon class="tag-close" @click="handleClose(tag.tag)" v-if="tag.modifiable"><Close /></el-icon>
      </div>
    </el-tooltip>
  </div>
</template>
 <script lang="ts" setup> 
import {defineProps,defineEmits, computed,ref,nextTick} from 'vue';
import { ElMessage } from 'element-plus';
const emit=defineEmits(['handleClose','handleAdd'])
const props=defineProps({
  dynamicTags: {
      type: Array as any,
      default: () => {
        return []
      },
    },
})
const saveTagInput = ref<any>(null);
const inputVisible=ref(false);
const inputValue=ref('');
const show=ref(-1);
const reverseArray=computed(()=>{
  if (Array.isArray(props.dynamicTags)) {  
    return props.dynamicTags.slice().reverse();  
  } else {  
    // 这里可以处理非数组的情况，例如返回一个空数组或发出警告  
    console.warn('dynamicTags is not an array!');  
    return [];  
  }  
    
  })
  
 const handleMouseEnter=(index)=> {
      show.value = index
    }
  const handleMouseLeave=()=> {
      show.value = -1
    }
   const handleClose=(tag)=> {
      emit('handleClose', tag)
      // this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
    }
  const showInput = () => {
  inputVisible.value = true;
  nextTick(() => {
    if (saveTagInput.value) {
      saveTagInput.value.focus();
    }
  });
};
    const handleInputConfirm = () => {
  if (inputValue.value) {
    const foundObject = props.dynamicTags.find(
      (item) => item.tag === inputValue.value,
    );
    if (foundObject) {
      return ElMessage.error('输入标签已存在');
    } else {
      emit('handleAdd', inputValue.value);
    }
  }
  inputVisible.value = false;
  inputValue.value = '';
};
</script> 
<style lang="scss" scoped>
.tag-container {
  @include flexBox($justifyContent: flex-start);
  gap: $-v-spacing-horizontal-small; /* 设置子项之间的间距 */

  .tag {
    display: flex;
    align-items: center;
    height: 26px;
    padding: 0 12px;
    font-size: 12px;
    color: #3aceff;
    border: 0.5px solid rgba(58, 206, 255, 0.6);
    border-radius: 4px;
    // background: rgba(58, 206, 255, 0.1);
    max-width: 156px;

    > span {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: middle;
      white-space: nowrap;
    }
    &:hover:not(.tag-num) {
      background: rgba(58, 206, 255, 0.3);
      .tag-close {
        display: inherit;
      }
    }
    .tag-close {
      width: 12px;
      margin-left: 4px;
      display: none;
      cursor: pointer;
    }
  }

  .new-tag {
    display: flex;
    align-items: center;
    height: 26px;
    box-sizing: border-box;
    padding: 0 10px;
    font-size: 12px;
    line-height: 12px;
    color: $-v-color-primary;
    // background: rgba(58, 125, 255, 0.1);
    border: 0.5px dashed $-v-color-primary;
    border-radius: 4px;
    cursor: pointer;
    &:hover {
      box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.3);
    }
  }
}
</style>
